<template>
	<div>
		<el-form :model="search" ref="form" inline :disabled="loading" class="pt-1 plr-1">
			<el-form-item label="所属事业部" prop="biz_id" v-if="userInfo.biz_id == 1">
				<cl-select
					v-model="search.biz_id"
					filterable
					style="width: 230px"
					@change="changeBiz"
				>
					<el-option
						v-for="(item, index) in business"
						:key="index"
						:label="item.biz_name"
						:value="item.biz_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="品牌" prop="bra_id">
				<cl-select
					v-model="search.bra_id"
					placeholder="请选择品牌"
					filterable
					style="width: 230px"
					@change="getQrcode"
				>
					<el-option
						v-for="item in bizRefData.brand"
						:key="item.bra_id"
						:label="item.bra_name"
						:value="item.bra_id"
					/>
				</cl-select>
			</el-form-item>
		</el-form>
		<el-row :gutter="20" class="plr-1">
			<el-col :md="6" :sm="12" :xs="24" style="text-align:center">
				<el-image :key="search.bra_id" :src="qrcode" fit="cover" class="s-image">
					<div slot="error" class="image-slot">
						<i class="el-icon-picture-outline" style="font-size: 36px" />
					</div>
				</el-image>
			</el-col>
			<el-col :md="18" :sm="12" :xs="24">
				<div class="tips pa-2">
					<h2 class="mb-1">温馨提示 ！！！</h2>
					<p v-for="(item, index) in tipsText" :key="index">
						{{ item }}
					</p>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
	data() {
		return {
			qrcode: "", //收款码
			tipsText: [
				"1. 下面的“收款码”是你的专属码，不能交给他人使用",
				"2. 将“收款码”保存到你的电脑或手机上",
				"3. 要收取定金时，将“收款码”发给客户，通知客户用微信或支付宝扫码收款",
				"4. 收取金额由客户自行输入",
				"5. 收取到的定金，在左侧“收款列表”查看",
				"6. 可自行扫码体验一下效果"
			],
			search: {
				biz_id: "",
				bra_id: ""
			},
			loading: false
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	async created() {
		this.search.biz_id = this.getCurrBiz();
		this.changeBiz();
	},
	methods: {
		async changeBiz() {
			const { biz_id } = this.search;
			const data = await this.getBizRefBrand(biz_id);
			this.search.bra_id = data[0]?.value ?? "";
			await this.getQrcode();
		},
		async getQrcode() {
			this.loading = true;
			this.qrcode = await this.$service.deposit.mycode(this.search).done(() => {
				this.loading = false;
			});
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item--mini.el-form-item {
	margin-bottom: 10px;
}
.tips {
	box-sizing: border-box;
	background: #fbe1e3;
	color: #d9001b;
	line-height: 1.8;
	font-size: 14px;
	h2 {
		font-size: 18px;
	}
}
</style>
